<template>
	<div class="container">
		<view class="fliter">
			<view class="input-box single-input flex-space-between">
				<view class="item flex-center">
					<u-search :clearabled="true" bg-color="transparent" :show-action="false" v-model="query.serialno"
						placeholder="请输入机具号" @search="search"></u-search>
					<text class="iconfont icon-saoma" @click.stop="scanCode"></text>
				</view>
			</view>
		</view>
		<view class="nav-box">
			<text :class="{ active: navIndex == index }" @click="changeNav(index)" v-for="(item, index) in navList"
				:key="index">{{ item.title }}</text>
		</view>
		<view class="termial-box">
			<view class="total flex-space-between">
				<view class="num">
					共计
					<text class="blue">{{ totalNum }}</text>
					条
				</view>
				<view class="filter flex" @click="filterShow = true">
					<view class="btn2">
						筛选
						<text class="iconfont icon-down"></text>
					</view>
				</view>
			</view>

			<!-- <template v-if="list.length"> -->
			<view class="t-item flex" v-model="item.checked" v-for="(item, index) in list" :key="index"
				@click.stop="toDetail(item)">
				<view class="t-info">
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="机具SN号："
						:value="item.serialno" class="title" />
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="考核状态："
						:value="item.checkStatus == -1 ? '考核失败' : item.checkStatus == 0 ? '待考核' : item.checkStatus == 1 ? '考核中' : '考核成功'" />
					<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="产品政策："
						:value="item.policyName" />
				</view>
			</view>
			<uni-load-more :status="loadMore"></uni-load-more>
			<!-- </template> -->
		</view>
		<u-popup v-model="filterShow" mode="top" :border-radius="20">
			<div class="filter-body">
				<div class="filter-content">
					<u-field :disabled="true" label="产品政策：" :value="query.policyName" :label-width="170"
						input-align="left" placeholder="请选择" >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showPicker = true"></text>
					</u-field>
					<u-field label="代理商编号：" v-model="query.agentNo" :label-width="170" input-align="left"
						placeholder="请输入代理商编号">
					</u-field>
					<u-field label="商户号：" v-model="query.merchNo" :label-width="170" input-align="left"
						placeholder="请输入商户号">
					</u-field>
					<u-field label="达标等级：" v-model="query.cond" :label-width="170" input-align="left"
						placeholder="请输入达标等级">
					</u-field>
					<u-field label="订单号：" v-model="query.orderNo" :label-width="170" input-align="left"
						placeholder="请输入订单号">
					</u-field>
					<view class="duble-input flex-space-between">
						<text class="text">日期</text>
						<u-field label="" v-model="query.startDate" :disabled="true" :label-width="0"
							:border-bottom="false" input-align="center" placeholder="请选择" @click="chooseTime('start')">
						</u-field>
						-
						<u-field :disabled="true" label="" :value="query.endDate" :border-bottom="false"
							input-align="center" :label-width="0" placeholder="请选择" @click="chooseTime('end')" />
					</view>
				</div>
				<div class="footer-btn">
					<div class="btn-left"><button class="reset" size="large" type="warn"
							@click="resetHandle">重置</button></div>
					<div class="btn-right"><button class="myBtn" round size="large" @click="queryHandle">搜索</button>
					</div>
				</div>
			</div>
		</u-popup>

		<u-picker title="政策" v-model="showPicker" mode="selector" :range="policyList" range-key="policyName"
			confirm-color="#4888FB" @confirm="onConfirm" @cancel="showPicker = false" />
		<u-picker mode="time" v-model="timePicker" :default-time="defaultTime" :params="params" title="选择年月"
			@confirm="pickerConfirmHandle" start-year="2021" @cancel="timePicker = false" confirm-color="#4888FB" />
	</div>
</template>

<script>
	import loadMoreData from '@/mixins/loadmore';

	import {
		standardListData
	} from '_a/tripartiteData';

	export default {
		mixins: [loadMoreData],
		data() {
			return {
				query: {
					// policyCode: this.$store.getters.policyList[0].policyCode
					id:30
				},
				list: [],
				selectCheckbox: [],
				type: 2,
				showPicker: false,
				navIndex: 0,
				navList: [{
						title: '全部',
						value: ''
					}, {
						title: '待考核',
						value: '0'
					}, {
						title: '考核中',
						value: '1'
					},
					{
						title: '考核成功',
						value: '2'
					},
					{
						title: '考核失败',
						value: '-1'
					}
				],
				filterShow: false,
				typename: '全部',
				totalNum: 0,
				pageSize: 2,
				checkStatusList: [],
				timePicker: false,
				chooseType: "start", //选择时间类型
				defaultTime: "",
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
				},
			};
		},
		computed: {
			policyList() {
				return this.$store.getters.policyList || [];
			}
		},
		onLoad(o) {
			this.navIndex = o.type || 0;
			this.getList();
		},
		onNavigationBarButtonTap() {
			this.$nav.push({
				path: '/pages/home/trading/operation'
			});
		},
		methods: {
			toDetail(item) {
				// this.$storage.setStore('termDetailInfo', item);
				this.$nav.push({
					path: '/pages/home/tripartiteData/merchStandardCheck/detail',
					query: {
						id: item.id,
					}
				});
			},
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.query
				};
				standardListData(params).then(res => {
					var list = res.rows;
					this.totalNum = res.total;
					this.loadMoreStatusDeal(list);
					if (list.length > 0) {
						this.list = this.list.concat(list);
					}
				});
			},
			init() {
				this.$nextTick(() => {
					this.list = [];
					this.refreshLoad();
				});
			},
			resetHandle() {
				this.typename = '全部';
				this.query = {
					pageNum: 1,
					pageSize: 20
				};
			},
			queryHandle() {
				this.$forceUpdate();
				this.init();
				this.filterShow = false;
			},
			changeNav(i) {
				this.query.checkStatus = this.navList[i].value;
				this.navIndex = i;
				this.init();
			},
			scanCode(type) {
				let _this = this;
				// this.$tip.loading('识别中....')
				// #ifdef H5
				this.$tip.toast('暂不支持!');
				// #endif
				// #ifndef H5
				uni.scanCode({
					success(res) {
						_this.$tip.loaded();
						_this.$tip.toast('识别成功!');
						_this.query.serialno = res.result;
						this.init();
					},
					fail() {
						_this.$tip.loaded();
					}
				});
				// #endif
			},
			onConfirm(e) {
				console.log(e);
				this.query.policyCode = this.policyList[e[0]].policyCode;
				this.query.policyName = this.policyList[e[0]].policyName;
				// this.chooseIndex = e[0];
			},
			chagneActive(item) {
				// item.isActive = !item.isActive
				this.$forceUpdate();
			},
			reachBottomCallBack() {
				this.getList();
			},
			search() {
				this.init();
			},
			chooseTime(type) {
				this.timePicker = true;
				this.chooseType = type;
				if (type == "start") {
					this.defaultTime = this.query.startDate;
				} else {
					this.defaultTime = this.query.entDate;
				}
			},
			pickerConfirmHandle(item) {
				if (this.chooseType == "start") {
					this.query.startDate = `${item.year}-${item.month}-${item.day}`;
				} else {
					this.query.endDate = `${item.year}-${item.month}-${item.day}`;
				}
				this.timePicker = false;
			},
		}
	};
</script>
<style scoped lang="scss">
	.container {
		padding: R(30) 0 R(140);
	}

	.fliter {
		margin: 0 R(25);

		.single-input {
			flex-wrap: wrap;
			align-items: center;

			.item {
				background: #fff;
				width: 100%;
				padding-right: R(30);
				padding-left: R(10);
				height: R(80);
				background: #ffffff;
				border-radius: R(10);
				margin-bottom: R(30);

				.icon-saoma {
					color: $themeColor;
				}
			}
		}
	}

	.nav-box {
		margin: 0 R(23) R(30);

		text {
			width: R(124);
			height: R(60);
			line-height: R(60);
			background: #ffffff;
			border-radius: R(30);
			display: inline-block;
			color: #1a1a1a;
			text-align: center;
			font-size: R(28px);
			margin-right: R(20);
			margin-top: R(20);
		}

		.active {
			border: 1px solid #4286f5;
			color: #4286f5;
			background: #d9e7ff;
			// border-bottom-right-radius: R(20);
		}
	}

	.termial-box {
		margin: 0 R(25);
		background: #fff;
		border-radius: R(10);
		padding: R(26) R(30);

		.total {
			margin-bottom: R(20);
			font-size: R(24);

			.num {
				font-weight: 400;
				color: #737373;

				.blue {
					color: #4286f5;
				}
			}

			.filter {
				color: #8c8c8c;

				.btn1 {
					margin-right: R(20);
				}

				.icon-down {
					font-size: R(20);
				}
			}
		}

		/deep/.u-checkbox-group {
			width: 100%;
		}

		.t-item {
			padding: R(14) 0 R(24);
			width: 100%;
			border-bottom: 1px solid #eee;

			position: relative;

			.title {
				font-size: R(30);
				font-weight: bold;
				color: #1a1a1a;

				/deep/.u-cell__value {
					color: #1a1a1a;
				}
			}

			/deep/.u-cell {
				padding: R(4) R(10);

				.u-cell__value {
					text-align: left;
				}
			}

			.btn-box {
				width: R(137);
				height: R(60);
				line-height: R(60);
				background: #d9e7ff;
				border-radius: R(30);
				color: #4286f5;
				text-align: center;
				font-size: R(28px);
				margin-right: R(20);
				position: absolute;
				right: R(10px);
				top: 43%;
			}
		}
	}
	.filter-content {
	  margin-bottom: R(30);
	  .duble-input {
	    border-bottom: 1px solid #eee;
	    .text {
	      width: R(140);
	      white-space: nowrap;
	      padding: 0 R(28);
	    }
	  }
	}

	.filter-body {
		padding: R(30);
	}

	.filter-content {
		margin-bottom: R(30);
	}

	.filter-body .footer-btn {
		display: flex;
		/*position: absolute;*/
		bottom: 0;
		width: 100%;
	}

	.filter-body .footer-btn .btn-left {
		width: 30%;
		margin-left: 15%;
	}

	.filter-body .footer-btn .btn-right {
		width: 30%;
		margin-left: 10%;
	}

	.filter-body .filter-tiem {
		margin-bottom: R(25);
	}

	.filter-body .filter-tiem .tit {
		font-size: R(32);
		color: #333;
	}

	.filter-body .filter-tiem .select-list .select-item {
		float: left;
		width: 33%;
		padding: R(20) R(10);
	}
</style>
